<!-- 店铺内订单组件 -->
<template>
  <view>
    <!--  -->
    <view class="order-section">
      <view class="shop-order">
        <view
          class="order-inner-box"
          v-for="(order, index) in orderInfo.list"
          :key="index"
        >
          <view class="order-time">
            <text v-if="orderInfo.list.length > 1"
              >{{$t('alipay.order1')}}{{ orderInfo.list.length - index }}{{$t('alipay.order2')}}</text
            >
            <text>{{$t('alipay.orderSuc')}}</text>
          </view>
          <view class="order-add">
            <!-- <text v-if="index == 0" @click="addGoods">还有未点美食？添加</text> -->
            <image
              :src="asyncImgs.alipay.right_grey_arrow"
            ></image>
          </view>
          <view class="good-list">
            <view
              class="good-item"
              v-for="(item, i) in order.goods_list"
              :key="i"
            >
              <view class="good-item-info">
                <image :src="item.pic" mode=""></image>
                <view class="info-box">
                  <view class="name">{{ item.name }}</view>
                  <view class="num">x{{ item.num }}</view>
                </view>
              </view>
              <view class="item-price">
                <text>￥</text>
                <text>{{ item.price }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="order-total">
          <view class="total-num">
            {{$t('alipay.total')}}<text>{{ orderInfo.goods_count }}</text
            >{{$t('alipay.count')}}
          </view>
          <view class="total-price">
            {{$t('alipay.totalNum')}}￥ <text>{{ orderInfo.pay_price }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="order-summary">
      <view class="summary-item">
        <view class="label">{{$t('clerk.orderNum')}}</view>
        <view class="label-val">{{ orderInfo.order_no }}</view>
      </view>
      <view class="summary-item">
        <view class="label">{{$t('clerk.orderTime')}}</view>
        <view class="label-val">{{ orderInfo.created_at }}</view>
      </view>
      <view class="summary-item">
        <view class="label">{{$t('alipay.tableNum')}}</view>
        <view class="label-val">{{ orderInfo.table_num }}</view>
      </view>
    </view>

    <view class="foot-section" v-if="showFooterPay">
      <view class="btn-group">
        <view @click="addGoods">{{$t('alipay.add')}}</view>
        <view @click="gotoPay">{{$t('alipay.pay')}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    mealType: {
      type: String,
      default: "",
    },
    orderInfo: {
      type: Object,
      default: {},
    },
    orderId: {
      type: String,
      default: "",
    },
    showFooterPay: {
      type: Boolean,
      default: true,
    },
  },

  methods: {
    addGoods() {
      this.$utils.toUrl(
        `/alipay-order/orderMeal/orderMeal?type=addGoods&order_id=${this.orderId}`,
        "redirectTo"
      );
    },
    gotoPay() {
      this.$emit("gotoPay");
    },
  },
};
</script>

<style lang="less" scoped>
.order-section {
  width: 93.6vw;
  background: #ffffff;
  border-radius: 2.13vw;
  margin: 3.2vw auto 0;
  .shop-order {
    padding: 4vw 3.2vw;
    .order-inner-box {
      margin-top: 4vw;
      border-bottom: 0.13vw solid #e5e5e5;

      .order-time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 3.73vw;
        font-weight: 400;
        line-height: 4.27vw;
        color: #999999;
        margin-bottom: 3.73vw;
        text:last-child {
          font-size: 3.2vw;
          color: #ff7800;
        }
      }
      .order-add {
        display: flex;
        align-items: center;
        font-size: 3.73vw;
        font-weight: 400;
        line-height: 4.27vw;
        color: #fd4b32;
        image {
          width: 1.87vw;
          height: 3.2vw;
          background-size: 100% 100%;
          display: block;
          margin-left: 1.33vw;
        }
      }
      .good-list {
        margin-top: 3.2vw;
        .good-item {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 3.2vw;
          .good-item-info {
            display: flex;
            align-items: flex-start;
            image {
              width: 13.33vw;
              height: 13.33vw;
              background-color: #f9f9f9;
              background-size: 100% 100%;
              border: 0.13vw solid rgba(112, 112, 112, 0.2);
              border-radius: 0.8vw;
              display: block;
              margin-right: 2.13vw;
            }
            .info-box {
              font-size: 3.73vw;
              font-weight: 600;
              line-height: 4.27vw;
              color: #191919;
              .num {
                font-size: 3.2vw;
                font-weight: 400;
                color: #999999;
                margin-top: 0.53vw;
              }
            }
          }
          .item-price {
            font-size: 4.27vw;
            font-weight: 600;
            line-height: 4.27vw;
            color: #191919;
            text:first-child {
              font-size: 3.2vw;
            }
          }
        }
      }
    }
    .order-total {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      margin-top: 3.2vw;
      .total-num {
        font-size: 3.73vw;
        font-weight: 400;
        line-height: 4.27vw;
        color: #191919;
        margin-right: 3.2vw;
        text {
          color: #fd4b32;
        }
      }
      .total-price {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        font-size: 3.73vw;
        font-weight: 600;
        line-height: 4.27vw;
        color: #191919;
        text {
          font-size: 6.4vw;
        }
      }
    }
  }
}

.order-summary {
  width: 93.6vw;
  padding: 4vw 3.2vw;
  background: #ffffff;
  border-radius: 2.13vw;
  margin: 3.2vw auto;
  .summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4vw;
    font-size: 3.73vw;
    line-height: 4.27vw;

    .label {
      font-weight: 600;
      color: #191919;
    }
    .label-val {
      font-weight: 400;
      color: #999999;
    }
  }
  .summary-item:last-child {
    margin-bottom: 0;
  }
}

.foot-section {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 211;
  height: 13.07vw;
  background: #ffffff;
  .btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.07vw auto;
    view {
      width: 45.33vw;
      height: 10.67vw;
      border: 0.27vw solid #1fb6fd;
      border-radius: 8vw;
      text-align: center;
      line-height: 10.67vw;
      color: #1fb6fd;
      font-size: 4.27vw;
      font-weight: 600;
    }
    view:last-child {
      margin-left: 2.93vw;
      background: #1fb6fd;
      color: #ffffff;
    }
  }
}
</style>
